<template>
  <div>
    <span>分组选择：</span>
    <!-- 绑定事件获取当前索引 -->
    <!-- $event.target 指定是当前原生DOM节点 <option value="0">华为</option> -->
    <select @change="selectChange($event.target.value)">
      <option v-for="(title, index) of data" :key="index" :value="index">
        {{ title }}
      </option>
    </select>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['selectChange']);

//获取视图模板中的value并向父组件传递
const selectChange = (value) => {
  emit('selectChange', value);
};
</script>
